import React, { useContext, useEffect, useState } from 'react'
import './index.css'
import { returnOrUpdate } from 'ol/extent';
import FxqhContext from '../../SpecialMap/fxqhContext';
import shuJu from './ShuJu';
import JcyjApi from '../../../../../../../utils/apis/JcyjApi';


export default function Qytj(props) {
    const [progress, setProgress] = useState(false); // 初始化进度为0
    const { leftKey } = useContext(FxqhContext)
    const { statData, selectedName } = props
    const fengxXianFenJiYuanYi = shuJu(leftKey)
    const [colors_f, setColors_f] = useState(false); // 初始化进度为0
    useEffect(() => {
        JcyjApi.map_color_jyl().then(resp => {
            if (resp.data) {
                let jyls = resp.data.map(e => {
                    let colors
                    let dengji
                    if (e.data < 25) {
                        colors = 'rgba(56,101,240,0.5)'
                        dengji='低风险'
                    } else if (e.data >= 25 && e.data < 50) {
                        colors = 'rgba(247,245,0,0.5)'
                         dengji='中风险'
                    } else if (e.data >= 50 && e.data < 100) {
                        colors = 'rgba(235,142,0,0.5)'
                         dengji='中-高风险'
                    } else if (e.data >= 100) {
                        colors = 'rgba(197,34,36,0.5)'
                         dengji='高风险'
                    }
                    console.log('颜色',colors)
                    return { name: e.qx, value: e.data,colors:colors,dengji:dengji }
                })
                setColors_f(jyls)
            }
        })
        console.log('壁纸',selectedName === '1'||selectedName === '5' ,selectedName)
    }, [selectedName])
    const zaiHaiBianQian = (bqCanShu) => {
        let number = 0;
        statData.map(e => {
            if (number > e.value) {
                return
            } else {
                number = e.value
                return
            }
        })
        number = number * 1.3



        return <>
            {
                statData.map((e, i) => {
                    return <div>
                        <div class="container po_re">
                            {console.log("bug",colors_f,colors_f.filter(a=>a.name===e.name)[0].colors)}
                            <div class="item green">{e.name}</div>
                            <div class="item blue"><div class="progress" id="loading-bar" style={{ width: `${e.value / number * 100}%` }}></div></div>
                            <div class="item gray">{e.value}个</div>
                            <div class="item red" id={i} style={{ backgroundColor: `${(selectedName === '1'||selectedName === '5' )? (fengxXianFenJiYuanYi?.[e.name]?.color) : colors_f.filter(a=>a.name===e.name)[0].colors}` }} onClick={(e) => { if (progress === `${e.target.id}`) { setProgress(false); return }; setProgress(e.target.id) }}>{(selectedName === '1'||selectedName === '5' )? (fengxXianFenJiYuanYi?.[e.name]?.fengXiandengji):colors_f.filter(a=>a.name===e.name)[0].dengji}</div>
                        </div>
                        {progress === `${i}` && <div class='po_ab'>
                            <div class="container red-buc">
                                <div class="item green">{e.name}</div>
                                <div class="item blue"><div class="progress" id="loading-bar" style={{ width: `${e.value / number * 100}%` }}></div></div>
                                <div class="item gray">{e.value}个</div>
                                <div class="item red" id={i} style={{ backgroundColor: `${(selectedName === '1'||selectedName === '5' )? (fengxXianFenJiYuanYi?.[e.name]?.color) : colors_f.filter(a=>a.name===e.name)[0].colors}` }} onClick={(e) => { setProgress(e.target.id) }}>{(selectedName === '1'||selectedName === '5' )? (fengxXianFenJiYuanYi?.[e.name]?.fengXiandengji):colors_f.filter(a=>a.name===e.name)[0].dengji}</div>
                                <button onClick={() => { setProgress(false) }}>x</button>
                            </div>
                            <div class='txt'>
                                {fengxXianFenJiYuanYi?.[e.name]?.yuanYi}
                            </div>
                        </div>}
                    </div>
                })
            }
        </>


    }
    return (
        <div style={{ marginTop: 20 }}>
            {/* <div class="container">
                <div class="item green">翠屏区</div>
                <div class="item blue"><div class="progress" id="loading-bar" style={{ width: `${progress}%` }}></div></div>
                <div class="item gray">1024个</div>
                <div class="item red">高风险</div>
            </div> */}
            {statData ? zaiHaiBianQian() : <div>暂无数据</div>}
        </div>
    )
}
